<template>
	<view>
		<!-- 导航栏 -->
		<u-navbar title="车队管理" :fixed="true" titleStyle="color:rgba(32, 32, 32, 1);font-size:36rpx;font-weight:bold"
			leftIconColor="rgba(32, 32, 32, 1)" leftIconSize="40rpx" :autoBack="true" :placeholder="true"
			height="88rpx">
		</u-navbar>
		<view v-if="formData.fleetName!=null">
			<view class="fleetInfo">
				<image class="picture" src="@/static/pic/fleetIcon.png">
				</image>
				<view class="info_group">
						<text class="fleetName" style="width: 85%;">{{formData.fleetName}}</text>
					<text class="fleetProps">面向车型：{{formData.faces}}</text>
					<view class="call">
						<image class="blurPhone"  @click="callPhone" src="@/static/pic/blurPhone.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<!-- 详细信息 -->
			<view class="detailInfo">
				<text class="title">详细信息</text>
				<view class="formBox">
					<uni-forms class="formStyle" label-width="180rpx" ref="form" :modelValue="formData" :rules="rules">
						<uni-forms-item label="所在地区" name="area">
							<input class="input" :disabled="true" type="text" v-model="formData.region"
								placeholder="">
						</uni-forms-item>
						<uni-forms-item label="地址" name="address">
							<input class="input" :disabled="true" v-model="formData.address" type="text"
								placeholder="" />
						</uni-forms-item>
						<uni-forms-item label="服务范围" name="address">
							<input class="input" :disabled="true" v-model="formData.serverRange" type="text"
								placeholder="" />
						</uni-forms-item>
						<uni-forms-item label="联系人" name="address">
							<input class="input" :disabled="true" v-model="formData.dispatcherName" type="text"
								placeholder="" />
						</uni-forms-item>
						<uni-forms-item label="电话" name="address">
							<input class="input" :disabled="true" v-model="formData.dispatcherPhone" type="text"
								placeholder="" />
						</uni-forms-item>
					</uni-forms>
				</view>
			</view>

			<button class="btn" @click="submit(2)"
				v-if="formData.state==1 && (formData.isFleet==0 || formData.isFleet==null)">解绑车队</button>
			<button class="btn" @click="submit(0)"
				v-if="formData.state==null && (formData.isFleet==0 || formData.isFleet==null)">加入车队</button>
			<button class="btn"
				v-if="formData.state==0 && (formData.isFleet==0 || formData.isFleet==null)">加入车队审核中</button>
			<button class="btn"
				v-if="formData.state==2 && (formData.isFleet==0 || formData.isFleet==null)">解绑车队审核中</button>
	<!-- 		<button class="btn" v-if="formData.state==0 && formData.isFleet==1 && formData.isFleet!=null">你已有车队</button>
			<button class="btn" v-if="formData.state==null && formData.isFleet==1">你已加入车队</button> -->
		</view>

		<div >
			<button class="btn" @click="tofeet" v-if="!id & formData.state==null">立即加入车队</button>
			<button class="btn"  v-if="Join==1 & formData.state==0 && (formData.isFleet==0 || formData.isFleet==null)">加入车队审核中</button>
		</div>
		<!-- 车队栏 -->
		<view v-if='Join==0'>
			<view class="main">
				<view class="title">
					加入车队
				</view>
				<view class="message">
					{{content}}，是否同意?
				</view>
				<view style="height: 80RPX;"></view>
			</view>
			<button class="btn_SUN"  v-if="formData.state==0 && (formData.isFleet==0 || formData.isFleet==null)">已加入该车队待审核</button>
		<button class="btn_SUN" v-else-if="formData.state==null && formData.isFleet==1">你已加入车队</button>
			<button class="btn_SUN" @click="submit(0)" v-else>同意加入</button>
		</view>
	</view>
</template>

<script>
	import order from '@/api/modules/order.js'
	export default {
		data() {
			return {
				data: {
					name: '王海',
					fleetName: '渝通物流-重庆智行'
				},
				id: '',
				Join: 1,
				content: '',
				correspondingId: '',
				// 表单数据
				formData: {

				},
				rules: {
					// 对area字段进行必填验证
					area: {
						rules: [{
							required: true,
							errorMessage: '所在地区不能为空',
						}]
					},
					// 对address字段进行必填验证
					address: {
						rules: [{
							required: true,
							errorMessage: '地址不能为空',
						}]
					},
					result:'',
					// 对scope字段进行必填验证
					scope: {
						rules: [{
							required: true,
							errorMessage: '服务范围不能为空',
						}]
					},
					// 对contacts字段进行必填验证  联系人
					contacts: {
						rules: [{
							required: true,
							errorMessage: '联系人不能为空',
						}]
					},
					// 对contacts字段进行必填验证  联系人
					phone: {
						rules: [{
							required: true,
							errorMessage: '电话不能为空'
						}, {
							validateFunction: function(rule, value, data, callback) {

							}
						}]
					}
				}
			}
		},
		onLoad(e) {
			this.id = e.fleetId
			if (e.correspondingId) {
				this.correspondingId = e.correspondingId
				this.Join = 0
				this.content = e.msg
			}
			this.cread()
			
			order.queryDriverStateDetail({}).then((res) => {
				if(res.data.code==200){
					this.result = res.data.data;
				}
			});
		},
		methods: {
			tofeet() {
				uni.redirectTo({
					url: '/pages/fleet/fleet'
				})
			},
			//拨打电话
			callPhone() {
				uni.makePhoneCall({
					phoneNumber: this.formData.dispatcherPhone
				})

			},
			async submit(e) {
				if(this.result.cert_status!=2){
					uni.showToast({
						title:"司机未认证",
						icon:"none"
					})
					return false
				}
				let that = this
				let id 
				if(this.Join == 0){
					id = this.correspondingId
				}else{
					id = this.formData.fleetId
				}
				let res = await this.$http.fleet.fleet_bindDriver({
					fleetId:id,
					portAddress: 'DRIVER',
					bindStatus: e
				})
				if (res.data.code == 200) {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
					if (this.Join == 0) {
						this.Join = 1
						setTimeout(()=>{
							uni.redirectTo({
								url:'/pages/my/fleetManage/fleetManage'
							})
						},1000)
					}else{
						setTimeout(() => {
							that.cread()
						}, 1000)
					}
					
				}
			},
			async cread(e) {
				let res;
				if (this.id) {
					res = await this.$http.fleet.getFleetDetails({
						fleetId: this.id
					})
				} else {
					res = await this.$http.fleet.fleet_queryMyFleet()
				}
				if(res.data){
					this.formData = res.data.data
				}
			}
		},

	}
</script>

<style lang="scss" scoped>
	@import url("@/static/iconfont/iconfont.css");
.blurPhone {
			width: 35rpx;
			margin-left: auto;
		}
	.fleetInfo {
		box-sizing: border-box;
		padding: 35rpx 50rpx;
		height: 170rpx;
		width: 750rpx;
		background-color: #fff;
		display: flex;
		margin: 10rpx 0 20rpx 0;



		>.picture {
			width: 100rpx;
			height: 100rpx;
			border-radius: 25rpx;
			margin-right: 20rpx;
			box-shadow: 0 0 1rpx 1rpx rgba(32, 32, 32, 1) inset;
		}

		>.info_group {
			display: flex;
			flex-direction: column;
			flex: 1;
			position: relative;

			>.fleetName {
				color: rgba(32, 32, 32, 1);
				font-size: 32rpx;
				font-weight: bold;
				margin-bottom: auto;
			}

			>.fleetProps {
				color: rgba(153, 153, 153, 1);
				font-size: 26rpx;
			}

			>.call {
				position: absolute;
				top: 50%;
				right: 0;
				transform: translateY(-50%);
				height: 80rpx;
				width: 80rpx;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;

				>.icon-dianhua {
					color: rgba(0, 160, 233, 1);
					font-size: 30rpx;

				}
			}
		}
	}

	.detailInfo {
		background-color: rgba(255, 255, 255, 1);
		width: 750rpx;
		padding: 45rpx 60rpx 80rpx 60rpx;
		box-sizing: border-box;

		>.title {
			color: #202020;
			font-size: 34rpx;
			font-weight: bold;
			display: block;
			margin-bottom: 80rpx; //修正 
		}

		>.formBox {

			>.formStyle {

				//样式穿透  左边label区域
				::v-deep .uni-forms-item__label {
					color: #444444 100%;
					font-size: 28rpx;
				}

				//样式穿透 右边输入区域
				::v-deep .uni-forms-item__content {
					display: flex;
					justify-content: flex-end;
					align-items: center;
				}
			}

			.input {
				text-align: right;
				color: #202020;
				font-size: 28rpx;
				display: flex;
				align-items: center;
				width: 90%;
			}


		}
	}

	.btn {
		background-color: #00A0E9;
		height: 110rpx;
		width: 650rpx;
		text-align: center;
		line-height: 110rpx;
		color: #FFFFFF;
		font-size: 28rpx;
		position: absolute;
		left: 50%;
		transform: translate(-50%, 0);
		bottom: 88rpx;
	}

	.btn_SUN {
		background-color: #00A0E9;
		height: 110rpx;
		width: 650rpx;
		text-align: center;
		line-height: 110rpx;
		color: #FFFFFF;
		font-size: 28rpx;
	}

	.title {
		font-size: 48rpx;
		color: #202020;
		font-weight: bold;
		margin-bottom: 80rpx;
	}

	.message {
		font-size: 30rpx;
		color: #666666;
		line-height: 50rpx;
		margin-bottom: 75rpx;

	}

	.main {
		width: 750rpx;
		box-sizing: border-box;
		padding: 73rpx 70rpx 0 70rpx;
	}
</style>